<template>
    <div class="header-container">
            <div class="header-log">
                <a href="#" alt="智慧书籍">
                <img :src="img" alt="智慧书籍管理系统" title="智慧书籍管理系统">
                </a>
            </div>
            <div class="header-center">
                <div class="search-content">  <!-- 这里是搜素框。。。。。。。。。。。。。。。。。。。。。。。-->
                    <input type="text" placeholder="请输入书名or作者" :value="search" 
                    @input="inputSearch" @focus="inputSearch" @blur="searchConten"
                     class="search">
                    <el-button class="search-button" icon="el-icon-search" @click="searchClick" ></el-button>
                </div>
                <div class="search-info" v-show="en"  @mouseout="searchConten" @mouseover="searchen" >
                    <div class="search-result" v-for="(t,index) in searchData"
                        @click="getBookDetalis(t.id)"
                     :key="t.id+' '+index">
                        {{t.bookName}}
                    </div> 
                     

                </div>
                
            </div>
            <div class="header-login">
                <img :src="img2" alt="">
            </div>
        </div>
</template>
<script>
import log from '../../../resource/log.png'
import header2 from "'../../../resource/header2.png"
export default {
    data(){
        return{
            search:"",
            img:log,
            img2:header2,
            searchLock:true,
            searchData:null,
            en:false,
            clearT : null,
            count:0

        }
    },
    methods:{
        async  searchClick(){//模糊搜索，点击搜索按钮后开始，

            const result = await await this.$axios.get("/api/book/search",{
                       params:{
                          search:this.search
                       }
                   })

            store.commit("setBooksRows",result.rows);//查到的书籍存储到仓库里面
            store.commit("setBooksCount",result.count);//把书籍总数存到仓库
            console.log(result);
        }
        ,
        async inputSearch(e){//输入框每次发生变化都会触发，拿到的数据是搜索框输入提交服务器后
                            //匹配到的结果的书名
                this.search = e.target.value;
                 if(e.target.value == ''){
                     return;
                 }
                if(this.searchLock){//判断上次模糊搜索是否已经结束，如果没有就不再请求服务器，
                    this.en = true
                    this.searchLock = false;
                 const  {rows,count} = await this.$axios.get("/api/book/search",{
                       params:{
                          search:this.search
                       }
                   })
                   this.searchData = rows;//获取到的书籍类别
                   this.count = count;//获取到的书籍总数
                   this.searchLock = true;//解锁，下次input事件触发可以继续发起请求
                }
               

        },
        searchConten(){//鼠标移出搜索建议框，定时器1.5秒后就隐藏建议框
          this.clearT = setTimeout(() => {
               this.searchData=null; 
                 this.en = false;
            }, 1500);
               
  
         },
         searchen(){//若移出鼠标在1.5秒内再次把鼠标移入建议框则清除定时器，继续显示计时器
                clearTimeout(this.clearT);
                this.en = true
         },
         getBookDetalis(id){//搜索界面精准查询直接跳转到详情页
              this.$router.push(`/detalist?${id}`);

         }
      }
   
    
}
</script>
<style lang="less" >

@media screen and(max-width:600px) {

    .header-container{
        width: 100% !important;
    }

    .header-log,.header-login{
        display: none !important;
    }
    
   
    .header-center{
        //  transform: translate(135px,0px);
        position: relative;
        left: 30%;
        .search-info{
            left: 1% !important;

        }
    }
}


.header-container{
 
  height: 100%;
  width: 80%;
  width: 100;
  display: flex;
  justify-content: space-between;
    .header-center{
        height: 100%;
        width: 35%;
        .search-info{
            transition-delay: 2s;
            transform: translate(75px,30px);
            z-index: 120;
            position:fixed;
            width: 210px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            background-color: #FFF;
           
            .search-result{
                cursor: pointer;
                padding:10px 10px;
                
                border-bottom:1px solid #EBEEF5;
               
            }
            .search-result:hover{
                color:gray;
            }
        }
        .search-content{
            display: flex;
            justify-content: center;
        }
        .search{
            height: 37px;
            width: 200px;
            transform: translate(0px,31px);
        }
        .search-button{
          background-color: #67c23a;
          height: 43px;
          transform: translate(6px,30px);
          font-size: 20px;
          color: black;
        }
    }
    .header-login{
        width: 30%;
        height: 100%;
        display: flex;
        font-size: 30px;
        font-family: "fantasy";
        color:gray;
        
        justify-content: center;
         position: relative;
         img{
             width: 50%;
             height: 100%;
         }
        //  .login-button{
        //     cursor: pointer;
        //     height: 60px;
        //     width: 90px;
        //     position:absolute;
        //     right: 0px;
        //     top: 25%;
        //     background-color: #fff;
        //     border: 1px solid rgba(0,0,0,0.1);
        //     .login-svg{
        //         // color: grey;
        //         transform: translate(0px,-12px);
        //     }
        //     span{
        //       font-size: 100%;
        //       width: 40px;
        //     //   transform: translate(1px,10px);
        //       display: block;
        //       position:absolute;
        //       bottom: 0px;
        //       left:calc(50% - 20px);
        //     }
        //  }
    }
    .header-log{
       
        width: 20%;
        height: 100%;   
        a{
            cursor: pointer;
            display: block;
            height:100%;
            width: 100%;
           img{
             width: 90%;
             height: 100%;
           }
        }
    }
    .header-link{
      width: 100%;
      display: block;
      text-align: center;
      text-decoration: none;
      height: 30px;
    }
   
}
.el-container{
  height: 100%;
}

</style>